<template>
  <!-- 日历热点图容器 -->
  <div id="calendar" class="w-full h-full"></div>
</template>

<script setup>
  import * as echarts from "echarts";
  import { watch, onMounted, onUnmounted } from "vue";
  import { format, subMonths } from "date-fns";

  // 对外暴露的属性值
  const props = defineProps({
    value: {
      // 属性值名称
      type: Object, // 类型为对象
      default: null // 默认为 null
    }
  });

  // 当前日期
  const currentDate = new Date();
  // 半年前
  const sixMonthsAgo = subMonths(currentDate, 6);

  // 格式化后的开始、结束日期
  const startDate = format(sixMonthsAgo, "yyyy-MM-dd");
  const endDate = format(currentDate, "yyyy-MM-dd");

  // 日历热点数据
  const myData = [];

  // 保存图表实例引用
  let myChart = null;

  // 初始化日历热点图
  function initCalendar() {
    // 避免重复创建图表实例
    if (!myChart) {
      var chartDom = document.getElementById("calendar");
      if (chartDom) {
        myChart = echarts.init(chartDom);
      } else {
        return;
      }
    }

    // 清空之前的数据
    myData.length = 0;

    // 将传入的数据设置到 myDate 数组中
    let map = props.value;
    if (map) {
      for (let key in map) {
        myData.push([key, map[key]]);
      }
    }

    var option;

    option = {
      visualMap: {
        show: false,
        min: 0,
        max: 10
      },
      calendar: {
        // 日历显示的范围：开始日期 - 结束日期
        range: [startDate, endDate]
      },
      series: {
        type: "heatmap",
        coordinateSystem: "calendar",
        data: myData
      },
      gradientColor: [
        // 自定义热点颜色，参考了 GitHub 代码提交的颜色
        "#fff",
        "#40c463",
        "#30a14e",
        "#216e39"
      ]
    };

    option && myChart.setOption(option);
  }

  // 窗口大小变化处理函数
  function handleResize() {
    if (myChart) {
      myChart.resize();
    }
  }

  // 组件挂载完成后初始化
  onMounted(() => {
    // 初始渲染图表
    if (props.value) {
      initCalendar();

      // 添加延迟resize，确保DOM完全渲染后图表能正确显示
      setTimeout(() => {
        if (myChart) {
          myChart.resize();
        }
      }, 100);
    }
    // 添加窗口大小变化监听
    window.addEventListener("resize", handleResize);
  });

  // 组件卸载前清理
  onUnmounted(() => {
    // 移除事件监听
    window.removeEventListener("resize", handleResize);
    // 销毁图表实例
    if (myChart) {
      myChart.dispose();
      myChart = null;
    }
  });

  // 侦听属性, 监听 props.value 的变化，一旦 props.value 发生变化，就调用 initCalendar 初始化日历热点图
  watch(
    () => props.value,
    () => {
      if (props.value) {
        initCalendar();
      }
    }
  );
</script>
